<template>
  <div ref="chart" class="charts" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/minxins/resize'
export default {
  name: 'ProgressChart',
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.chart)
    myEcharts.setOption({
      grid: {
        right: 0,
        left: 0
      },
      xAxis: {
        min: 0,
        max: 100,
        show: false
      },
      yAxis: {
        // 调换x和y轴
        type: 'category',
        show: false
      },
      series: {
        data: [78],
        type: 'bar',
        // 柱条的宽度
        barWidth: 10,
        // 柱条的背景色
        showBackground: true,
        label: {
          // 柱tiao显示的内容
          show: true,
          // 具体内容是什么
          formatter: '|',
          color: 'pink',
          position: 'right'
        },
        itemStyle: {
          color: 'pink'
        }
      }
    })
    this.myEcharts = myEcharts
  }
}
</script>

<style lang="sass" scoped>
.charts
  width: 100%
  height: 100%
</style>
